<template>
  <section class="process">
    <el-form :model="form" ref="form" label-width="100px" :inline="false">
      <el-form-item label="指定用户:">
        <el-select v-model="form.userId" placeholder="请选择用户" clearable filterable>
          <el-option v-for="item in userlist" :key="item.id" :label="item.nick" :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="填写信息">
        <el-input v-model="form.msg" placeholder="请输入需要发生的内容" clearable></el-input>
      </el-form-item>
      <el-form-item label="指令一:">
        <el-button size="default" @click="sendInstruct('DataUpload')">资料补传</el-button>
      </el-form-item>
      <el-form-item label="指令二:">
        <el-button size="default" @click="sendInstruct('ViewInformation')">查看文档</el-button>
      </el-form-item>
      <el-form-item label="指令三:">
        <el-button size="default" @click="sendInstruct('ElectronicSignature')">电子签名</el-button>
      </el-form-item>
      <el-form-item label="视频截图:">
        <el-button size="default" @click="screenshot">视频截图</el-button>
        <el-button v-if="form.url" size="default" @click="download('screenshot.png',form.url)">下载截图</el-button>
      </el-form-item>
      <el-form-item v-if="form.url" label="截图效果">
        <img :src="form.url" alt="" width="400">
      </el-form-item>

    </el-form>
  </section>
</template>

<script>
import imClient from './components/utils/im-client.js'
import trtcClient from './components/utils/trtc-client.js'
export default {
  data () {
    return {
      form: {
        userId: '',
        msg: '',
        url: ''
      }
    }
  },
  mounted () {
    this.messageEvent()
  },
  methods: {
    /**
     * @author ZhenYuTsai
     * @description 发生指令消息
     * @lastEditors ZhenYuTsai
     * @param {String} instructType
     */
    sendInstruct (instructType) {
      if (!this.form.userId) return this.$message.error('请选择指定用户！')
      imClient.sendCustomMessage({
        id: this.form.userId,
        description: instructType,
        data: JSON.stringify({
          msg: this.form.msg
        })
      }, 'C2C')
    },
    /**
     * @author ZhenYuTsai
     * @description 接受自定义指令回调事件
     * @lastEditors ZhenYuTsai
     */
    messageEvent () {
      imClient.$on('CUSTOM_MESSAGE_C2C', (res) => {
        if (res.length > 0) {
          console.log('CUSTOM_MESSAGE_C2C', res)
        }
      })
    },
    /**
     * @author ZhenYuTsai
     * @description 截取指定用户图片
     * @lastEditors ZhenYuTsai
     */
    screenshot () {
      if (!this.form.userId) return this.$message.error('请选择指定用户！')
      const item = this.userlist.find(item => item.userId === this.form.userId)
      if (item && item.userId) {
        const base64 = trtcClient.getVideoFrame(item.remoteStream)
        const file = this.base64ToFile(base64)
        const url = URL.createObjectURL(file)
        this.form.url = url
      }
    },
    /**
     * @Author ZhenYuTsai
     * @Description base64转换为file对象
     * @Param {String} data base64数据
     * @Return {Object} file file对象
     */
    base64ToFile (data) {
      const binary = atob(data.split(',')[1])
      const mime = data.split(',')[0].match(/:(.*?);/)[1]
      const array = []
      for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      const fileData = new Blob([new Uint8Array(array)], { type: mime })
      const file = new File([fileData], `${new Date().getTime()}.png`, { type: mime })
      return file
    },
    /**
     * @author ZhenYuTsai
     * @description 下载文件
     * @lastEditors ZhenYuTsai
     * @param {String} filename
     * @param {String} link
     */
    download (filename, link) {
      const DownloadLink = document.createElement('a')
      DownloadLink.style = 'display: none' // 创建一个隐藏的a标签
      DownloadLink.download = filename
      DownloadLink.href = link
      document.body.appendChild(DownloadLink)
      DownloadLink.click() // 触发a标签的click事件
      document.body.removeChild(DownloadLink)
    }
  },
  computed: {
    userlist () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.form.userId = ''
      return trtcClient.remoteStreams
    }
  },
  beforeDestroy () {
    // 销毁CUSTOM_MESSAGE_C2C监听
    imClient.$off('CUSTOM_MESSAGE_C2C')
  }
}
</script>

<style>
</style>
